<template>
  <div>
    <Nav />
    <!--主页内容部分-->
    <div class="content">
      <!--轮播图-->
      <div class="carousel-box">
        <SlideShow :carouselProps="carouselData" />
      </div>
      <!--实验室优秀风采-->
      <div class="excellentStyle w">
        <h1>实验室优秀风采</h1>
        <h3>各种优秀奖状</h3>
        <div>
          <el-carousel :interval="4000" type="card" height="275px">
            <el-carousel-item v-for="item in prizeData" :key="item.id">
              <DynamicCard
                  :img-url="item.imgUrl"
                  :title="item.title"
                  :summary="item.summary"
                  :desc="item.desc"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!---项目手风琴-->
      <Direction :itemList="directionsData.itemList" :itemTitle="directionsData.itemTitle"></Direction>

      <!--合作商卡片显示-->
      <div class="partnerCards w">
        <div v-for="item in partnerData">
          <StaticCard
              :img-url="item.imgUrl"
              :logo-url="item.logoUrl"
              :desc1="item.desc1"
              :desc2="item.desc2"
          />
        </div>
      </div>
    </div>
    <footer>
      <Footer></Footer>
    </footer>
  </div>
</template>

<script>
import Nav from "../components/Nav";
import DynamicCard from "@/components/DynamicCard";
import SlideShow from "../components/SlideShow";
import StaticCard from "../components/StaticCard";
import Direction from "../components/Direction.vue";
import Footer from "../components/Footer.vue";
import { prizeData, carouselData,directionsData, partnerData } from "../websiteData/index_data";

export default {
  name: "index",
  components: { StaticCard, SlideShow, DynamicCard, Footer, Nav, Direction },
  data() {
    return {
      //轮播图数据
      carouselData,
      //优秀风采数据
      prizeData,
      //合作商数据
      partnerData,
      //研究方向数据
      directionsData
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  .carousel-box {
    width: 96%;
    min-width: 1200px;
    margin: 0 auto;
  }

  .excellentStyle {
    width: 1200px;
    margin-top: 40px;

    h1 {
      font-size: 26px;
      font-weight: normal;
      color: #3a92e4;
      text-align: center;
    }

    h3 {
      margin-top: 5px;
      margin-bottom: 15px;
      font-size: 16px;
      font-weight: normal;
      text-align: center;
    }

  }

  .partnerCards {
    margin-top: 90px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
</style>
